<template>
    <div style="width:300px;margin:0 auto;">
        <div><button @click="isShow = !isShow">显示/隐藏</button></div>
        
        <!-- mode="out-in" 一个消失了在执行另一个 -->
        <!-- <transition name="yzh" mode="out-in">
            <h2 v-if="isShow">hello transition</h2>
            <h2 v-else>你好啊，尹子恒！</h2>
        </transition> -->

        <!-- 组件切换的动画 appear初次渲染页面加载完成有动画-->
        <transition name="yzh" mode="out-in" appear>
            <component :is="isShow ? 'home' : 'about'"></component>
        </transition>
    </div>
</template>
<script>
import Home from './page/Home.vue';
import About from './page/About.vue';
export default {
    components: {
        Home,
        About
    },
    data() {
       return {
           isShow: true
       }
    },
    created() {},
    methods: {},
}
</script>
<style scoped>
h2 {
    display: inline-block;
}

/* 1. */
/* .yzh-enter-from,
.yzh-leave-to {
    opacity: 0;
}
.yzh-enter-to,
.yzh-leave-from {
    opacity: 1;
}
.yzh-enter-active, 
.yzh-leave-active {
    transition: opacity 1s ease;
} */

/* 2. */
.yzh-enter-active {
    animation: bounce 1s ease;
}
/* reverse 动画倒放 */
.yzh-leave-active {
    animation: bounce 1s ease reverse;
}

@keyframes bounce {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1.5);
    }
    100% {
        transform: scale(1);
    }
}
</style>
